import loginVue from '../login.vue';
<route lang="yaml">
  meta:
    enabled: false
                </route>

<script lang="ts" setup>
import { VXETable } from 'vxe-table'
import type { VxeFormEvents, VxePagerEvents, VxeTableInstance } from 'vxe-table'
import { ElMessage } from 'element-plus'
import { hiprint } from 'vue-plugin-hiprint'
import apiDrugInfo from '@/api/modules/drug_info'
import apiPrintTpl from '@/api/modules/print_tpl'
import useUserStore from '@/store/modules/user'

const g = useGlobalProperties()
const pageData = reactive({
  loading: false,
  tableData: [] as any[],
  statusList: [] as any[],
  // 弹窗相关
  modalShow: false,
  modalName: '',
  resetPwdModalShow: false,
  pwd: '',
  curResetRow: {} as any,
})
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 35,
  pageSizes: [35],
})

interface FormDataVO {
  orgCode: string
  orgIds: string
  orgName: string
  goodsName: string
  goodsCode: string
}
const formTop = reactive<FormDataVO>({
  orgCode: '',
  orgIds: '',
  orgName: '',
  goodsName: '',
  goodsCode: '',
})

const tableRef = ref<VxeTableInstance>()
/// /////////////////////////////////////////formatter
// const formatterStatus: VxeColumnPropTypes.Formatter<any> = ({ cellValue }) => {
//   const res = g.selectDictLabel(pageData.statusList, cellValue)
//   return res
// }

/// ///////////////////////////////////top按钮相关
function printQrcode() {
  const $table = tableRef.value
  if ($table?.getCheckboxRecords().length === 0) {
    ElMessage.error({
      message: '请选中打印行',
      center: true,
    })
    return
  }
  VXETable.modal.confirm('确定打印？').then((res) => {
    if (res === 'confirm') {
      const itemsRecord = $table?.getCheckboxRecords()
      const printData: any = {}
      if (itemsRecord) {
        for (let i = 0; i < itemsRecord.length; i++) {
          printData[`store${i}`] = itemsRecord[i].ORGNAME
          printData[`code${i}`] = itemsRecord[i].GoodsCode
          printData[`name${i}`] = itemsRecord[i].GoodsName
          printData[`qrcode${i}`] = `http://shsyyf.com:8888/drug?storeCode=${itemsRecord[i].ORGCODE}&drugCode=${itemsRecord[i].GoodsCode}`
        }
        apiPrintTpl.queryByName('二维码打印').then((res: any) => {
          const hiprintTemplate = new hiprint.PrintTemplate({ template: JSON.parse(res.data.tmpl) })
          // 打印
          hiprintTemplate.print(printData)
        })
      }
    }
  })
}
/// ///////////////////////////////////api
function apiPage(req: any) {
  pageData.loading = true
  apiDrugInfo.page(req).then((res) => {
    pageData.tableData = res.data.list
    tablePage.total = res.data.total
    pageData.loading = false
  }).catch((err) => {
    ElMessage.error({
      message: JSON.stringify(err),
      center: true,
    })
    pageData.loading = false
  })
}
/// ///////////////////////////////////翻页
const submitTopEvent: VxeFormEvents.Submit = () => {
  tablePage.currentPage = 1
  tablePage.pageSize = 35
  const req = {
    page: tablePage.currentPage,
    size: tablePage.pageSize,
    orgIds: formTop.orgIds,
    goodsName: formTop.goodsName,
    orgName: formTop.orgName,
    orgCode: formTop.orgCode,
    goodsCode: formTop.goodsCode,
  }
  apiPage(req)
}

const resetTopEvent: VxeFormEvents.Reset = () => {
  tablePage.currentPage = 1
  tablePage.pageSize = 35
  const req = {
    page: tablePage.currentPage,
    size: tablePage.pageSize,
    orgIds: formTop.orgIds,
    goodsName: formTop.goodsName,
    orgName: formTop.orgName,
    orgCode: formTop.orgCode,
    goodsCode: formTop.goodsCode,
  }
  // console.log(req)
  apiPage(req)
}
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage
  tablePage.pageSize = pageSize
  const req = {
    page: tablePage.currentPage,
    size: tablePage.pageSize,
    orgIds: formTop.orgIds,
    goodsName: formTop.goodsName,
    orgName: formTop.orgName,
    orgCode: formTop.orgCode,
    goodsCode: formTop.goodsCode,
  }
  apiPage(req)
}
/// ///////////////////////////////////生命周期
onBeforeMount(() => {
  g.getDicts('user_status').then((res: any) => {
    pageData.statusList = res.data.list
  })
})
onMounted(() => {
  const userStore = useUserStore()
  if (userStore.storeList) {
    const jsonData = JSON.parse(userStore.storeList)
    // console.log('------jsonData-----', jsonData)
    if (jsonData.length > 0) {
      const retData = jsonData.map((item: any) => {
        return item.customer_code
      })
      formTop.orgIds = retData.join(',')
    }
  }
  // console.log('------ formTop.orgIds-----', formTop.orgIds)
  tablePage.currentPage = 1
  tablePage.pageSize = 35
  const req = {
    page: tablePage.currentPage,
    size: tablePage.pageSize,
    orgIds: formTop.orgIds,
    goodsName: formTop.goodsName,
    orgName: formTop.orgName,
    orgCode: formTop.orgCode,
    goodsCode: formTop.goodsCode,
  }
  apiPage(req)
})
</script>

<template>
  <div class="page-wrap">
    <div class="page-top">
      <vxe-form :data="formTop" style="padding-left: 5px;" @submit="submitTopEvent" @reset="resetTopEvent">
        <vxe-form-item title="药品名称" field="goodsName" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.goodsName" placeholder="请输入名称" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item title="药品编号" field="goodsCode" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.goodsCode" placeholder="请输入编号" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item title="药房名称" field="orgName" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.orgName" placeholder="请输入名称" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item>
          <template #default>
            <vxe-button type="submit" status="primary" content="搜索" />
            <vxe-button type="reset" content="重置" />
          </template>
        </vxe-form-item>
      </vxe-form>
      <vxe-toolbar>
        <template #buttons>
          <vxe-button style="margin-left: 5px;" @click="printQrcode">
            打印二维码
          </vxe-button>
        </template>
      </vxe-toolbar>
    </div>
    <page-main>
      <vxe-table
        ref="tableRef" auto-resize stripe border :loading="pageData.loading" :column-config="{ resizable: true }"
        :row-config="{ isHover: true }" :checkbox-config="{ highlight: true, range: true }" :data="pageData.tableData"
        align="center" header-align="center"
      >
        <vxe-column type="checkbox" width="50" />
        <vxe-column field="GoodsName" align="center" title="药品名称" />
        <vxe-column field="GoodsCode" align="center" title="编号" />
        <vxe-column field="GoodsSpec" align="center" title="规格" />
        <vxe-column field="Manufacturer" align="center" title="生产厂家" />
        <vxe-column field="ApprovalNo" align="center" title="批准文号" />
        <vxe-column field="ORGNAME" align="center" title="药房" />
        <!-- <vxe-column field="status" align="center" title="状态" :formatter="formatterStatus" /> -->
        <!-- <vxe-column title="操作" fixed="right" width="200">
          <template #default="{ row }">
            <vxe-button status="primary" @click="delItem(row)">
              查看账号
            </vxe-button>
          </template>
        </vxe-column> -->
      </vxe-table>
    </page-main>
    <div class="page-opration-container">
      <vxe-pager
        v-model:current-page="tablePage.currentPage" v-model:page-size="tablePage.pageSize"
        :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        :total="tablePage.total" :page-sizes="tablePage.pageSizes" @page-change="handlePageChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-wrap {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .page-top {
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 5px;
  }

  .page-main {
    flex: 1;
    padding-top: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: auto;
  }

  .page-opration-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
  }
}
</style>
